<template>
  <!-- 重设密码 -->
  <div class="psw-edit">
        <mt-header>
            <router-link to="/auth/login" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
         <!-- logo -->
        <div class="img-box">
            <img src="~@/assets/login_logo.png"/>
        </div>
        <!-- 找回密码区域 -->
        <div class="pwd-area">
            <!-- 修改进程 -->
            <div class="edit-process">
                <div class="process-top">
                    <span class="first">01</span>
                    <span class="fenge"></span>                    
                    <span :class="{second:number==2}">02</span>
                </div>
                <div class="process-bottom">
                    <p>验证手机号</p>
                    <p>重置密码</p>
                </div>
            </div>
            <!-- 验证原手机号 -->
            <div class="process-1"  v-if="number==1">
                <!-- 请输入您的手机号 -->
                <div class="input-phone">
                    <svg class="icon icon-jia" aria-hidden="true">
                        <use xlink:href="#icon-msnui-tel"></use>
                    </svg>
                    <input type="number" placeholder="请输入您的手机号" v-model="searchCondition.phone"/>
                </div>
                <!-- 请输入验证码 -->
                <div class="input-yanzheng">
                    <svg class="icon icon-jia" aria-hidden="true">
                        <use xlink:href="#icon-yanzhengma"></use>
                    </svg>
                    <input type="text" placeholder="请输入验证码" v-model="searchCondition.smscode"/>
                    <span class="fenge"></span>
                    <div class="cl-cell-title t2" @click="_sendSmsCode">
                      <span v-show="show" class="cl-cell-text">获取验证码</span>
                      <span v-show="!show" class="cl-cell-text">{{count}} s后重试</span>
                    </div> 
                </div>
                <br/>
                <!-- 更改密码 -->
                <mt-button type="primary" size="large" @click="next">更改密码</mt-button>
            </div>
            <!-- 验证新手机号 -->
            <div class="process-2" v-if="number==2">
                <!-- 请输入您的新密码 -->
                <div class="input-phone">
                    <svg class="icon icon-jia" aria-hidden="true" @click.prevent="fabu">
                        <use xlink:href="#icon-mima"></use>
                    </svg>
                    <input type="password" placeholder="请输入您的密码" v-model="searchCondition.newpwd"/>
                </div>
                <!-- 请输入验证码 -->
                <div class="input-yanzheng">
                    <svg class="icon icon-jia" aria-hidden="true" @click.prevent="fabu">
                        <use xlink:href="#icon-yanzhengma"></use>
                    </svg>
                    <input type="password" placeholder="请确认新密码" v-model="searchCondition.confirmpwd"/>
                </div>
                <!-- 更改密码 -->
                <mt-button type="primary" size="large" @click="handleRestPwd">确认</mt-button>
            </div>
            <!-- 返回登录、通过邮箱找回 -->
            <div class="pwd-extra">
                <span>返回登录</span>
            </div>
        </div>
  </div>
</template>

<script>
import { Header } from "mint-ui";
import { SendSmsCode, VerifySmsCode } from "@/api/filter";
import { Findpwd } from "@/api/user/auth";

export default {
  data() {
    return {
      number: 1,
      searchCondition: {
        phone: "",
        smscode: "",
        newpwd: "",
        confirmpwd: ""
      },
      show: true,
      count: "",
      timer: 0
    };
  },
  methods: {
    handleRestPwd() {
      if (this.searchCondition.newpwd == "") {
        this.$toast("请输入新密码！");
        return;
      }
      if (this.searchCondition.confirmpwd == "") {
        this.$toast("请再次输入新密码！");
        return;
      }
      if (this.searchCondition.confirmpwd != this.searchCondition.newpwd) {
        this.$toast("两次密码输入不匹配！");
        return;
      }
      var $router = this.$router;
      Findpwd(this.searchCondition).then(res => {
        if (res.StatusCode === 200) {
          this.$toast("重置密码成功！");
          setTimeout(function() {
            $router.push({ path: "/auth/login" });
          }, 2000);
        } else {
          MessageBox.alert(res.Data);
        }
      });
    },
    next() {
      if (this.searchCondition.phone == "") {
        this.$toast("请填写正确的手机号");
        return;
      }
      if (this.searchCondition.smscode == "") {
        this.$toast("请输入短信验证码");
        return;
      }
      VerifySmsCode(
        this.searchCondition.phone,
        this.searchCondition.smscode
      ).then(res => {
        if (res.StatusCode === 200) {
          this.number = 2;
        } else {
          MessageBox.alert(res.Data);
        }
      });
    },
    _sendSmsCode() {
      if (this.searchCondition.phone == "") {
        this.$toast("请填写正确的手机号！");
        return;
      }
      SendSmsCode(this.searchCondition.phone).then(res => {
        this.resend();
      });
    },
    resend() {
      var TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.psw-edit {
  height: 736px;
  background: #3887fe;
}
// 头部背景颜色
.mint-header {
  background: #3887fe;
}
// logo
.img-box {
  width: 108.3px;
  height: 50px;
  margin: 30px auto;
  img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
  }
}
//找回密码区域
.pwd-area {
  margin-top: 24px;
  margin-left: 12px;
  margin-right: 12px;
  background: #ffffff;
  border-radius: 6px;
  padding: 26px 18px 26px 18px;
  // 修改进程
  .edit-process {
    width: 85%;
    text-align: center;
    margin: 0 auto;
    .process-top {
      display: flex;
      justify-content: space-between;
      padding: 0 26px;
      align-items: center;
      font-size: 23px;
      color: #999999;
      .fenge {
        width: 70%;
        height: 2px;
        background: #dcdcdc;
      }
      .first {
        color: #3887fe;
      }
      .second {
        color: #3887fe;
      }
    }
    .process-bottom {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #999999;
    }
  }
  //输入手机号
  .input-phone {
    border: 1px solid #cfcfcf;
    border-radius: 20px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    margin-top: 38px;
    margin-bottom: 24px;
    input {
      font-size: 14px;
      -webkit-input-placeholder {
        color: #cfcfcf;
      }
    }
    .icon {
      margin-right: 8px;
    }
  }
}
//输入验证码
.input-yanzheng {
  border: 1px solid #cfcfcf;
  border-radius: 20px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  margin-top: 24px;
  margin-bottom: 24px;
  input {
    width: 65%;
    font-size: 14px;
    height: 20px;
  }
  .fenge {
    width: 1px;
    height: 14px;
    background: #cfcfcf;
    margin-right: 12px;
  }
  .icon {
    margin-right: 8px;
  }

  span {
    font-size: 14px;
    color: #666666;
  }
}
//更改密码
.mint-button {
  border-radius: 20px;
  background: #3887fe;
}
.pwd-extra {
  margin-top: 57px;
  color: #3887fe;
  font-size: 14px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .fenge {
    width: 1px;
    height: 14px;
    background: #dcdcdc;
    display: block;
    margin: 0 14px;
  }
}
</style>
